<template>
  <!-- <div class="node-item"
        ref="node"
        :style="flowNodeContainer"
        @mouseenter="showDelete"
        @mouseleave="hideDelete"
        @mouseup="changeNodeSite"
        @click.stop="editNode">
        <div class="node-con">
            <i :class="iconClass" class="type-icon"></i>
            <div>{{node.label}}</div>
        </div>
        <div class="node-del" v-show="mouseEnter" @click.stop="deleteNode">
          <i class="el-icon-circle-close"></i>
        </div>
        <div class="flow-node-drag" v-show="isconnect"></div>
    </div> -->
  <div style="width: 100%; height: 100%; position: relative" myTag="collection">
    <div
      v-for="item1 in list"
      :key="item1.uuid"
      ref="collection-node"
      :id="item1.uuid"
      @mouseup="changeNodeSite($event)"
      @mouseenter.prevent="showDelete($event, item1)"
      @mouseleave="hideDelete(item1)"
      @click.stop="editNode(item1)"
      :style="flowCollection(item1)"
      class="collection-wrap"
    >
      <div class="collection-remark">
        <p>
          <span>GUID</span>：<span>{{ item1.uuid }}</span>
        </p>
        <p>
          <span>集群名称：</span>：<span>{{
            item1.clusterName
          }}</span>
        </p>
        <p>
          <span>集群编码：</span
          >：<span>{{ item1.clusterId }}</span>
        </p>
        <p>
          <span>区域：</span>：<span>{{
            item1.regionName
          }}</span>
        </p>
        <p>
          <span>站点：</span>：<span>{{
            item1.stationName
          }}</span>
        </p>
        <p>
          <span>机房：</span>：<span>{{
            item1.roomName
          }}</span>
        </p>
        <p>
          <span>设备IP：</span>：<span>{{
            item1.ip
          }}</span>
        </p>
        <p>
          <span>设备端口：</span>：<span>{{
            item1.port
          }}</span>
        </p>
      </div>
      <div
        class="node-del"
        @click.stop="deleteNode(item1)"
        v-show="item1.mouseEnter"
      >
        <i class="el-icon-circle-close"></i>
      </div>
      <div style="position: relative; height: 100%" myTag="group">
        <div
          v-for="item2 in item1.children"
          :key="item2.uuid"
          ref="group-node"
          :id="item2.uuid"
          @mouseup="changeNodeSite($event)"
          @mouseenter.prevent="showDelete($event, item2)"
          @mouseleave="hideDelete(item2)"
          :style="flowGroup(item2)"
          @click.stop="editNode(item2)"
          class="group-wrap"
        >
          <div class="group-remark">
            <p>
              <span>GUID</span>：<span>{{
                item2.uuid
              }}</span>
            </p>
            <p>
              <span>机柜名称：</span
              >：<span>{{ item2.cabinetName }}</span>
            </p>
            <p>
              <span>机柜编码：</span
              >：<span>{{ item2.cabinetId }}</span>
            </p>
          </div>
          <div
            class="node-del"
            @click.stop="deleteNode(item2)"
            v-show="item2.mouseEnter"
          >
            <i class="el-icon-circle-close"></i>
          </div>
          <div style="position: relative; height: 100%" myTag="device">
            <div
              v-for="item3 in item2.children"
              :key="item3.uuid"
              ref="device-node"
              :id="item3.uuid"
              :title="`${item3.deviceId},${item3.deviceName}`"
              @mouseup="changeNodeSite($event)"
              @mouseenter.prevent="showDelete($event, item3)"
              @mouseleave="hideDelete(item3)"
              @click.stop="editNode(item3)"
              :style="flowDevice(item3)"
              class="device-wrap"
            >
              <div class="device-remark">
                <p style="font-size: 8px">
                  <span>GUID</span>：<span>{{
                    item3.uuid
                  }}</span>
                </p>
                <p>
                  <span>设备名称：</span>：<span>{{
                    item3.deviceName
                  }}</span>
                </p>
              </div>
              <div
                class="node-del"
                @click.stop="deleteNode(item3)"
                v-show="item3.mouseEnter"
              >
                <i class="el-icon-circle-close"></i>
              </div>
              <!--连线用--//触发连线的区域-->
              <div class="flow-node-drag" v-show="isconnect"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: Array,
    isconnect: Boolean,
  },
  data() {
    return {
      mouseEnter: false,
      updateArr: [],
    };
  },
  computed: {
    // 节
    flowCollection() {
      return function (item) {
        return {
          position: "absolute",
          left: "1%",
          boxShadow: item.mouseEnter ? "#A3D1FF 0px 0px 12px 0px" : "",
        };
      };
    },
    flowGroup() {
      return function (item) {
        return {
          position: "absolute",
          width: "300px",
          height: "300px",
          top: item.top,
          left: item.left,
          boxShadow: item.mouseEnter ? "#A3D1FF 0px 0px 12px 0px" : "",
        };
      };
    },
    flowDevice() {
      return function (item) {
        return {
          position: "absolute",
          width: "170px",
          height: "70px",
          top: item.top,
          left: item.left,
          boxShadow: item.mouseEnter ? "#2451FF 0px 0px 12px 0px" : "",
          // zIndex: 10000
        };
      };
    },
    iconClass() {
      let iconClass = ''
      if (this.node.Type == 1) {
        iconClass = "el-icon-full-screen";
      } else if (this.node.Type == 2) {
        iconClass = "el-icon-office-building";
      } else if (this.node.Type == 3) {
        iconClass = "el-icon-mobile";
      } else if (this.node.Type == 4) {
        iconClass = "el-icon-bottom-right";
      }
      return iconClass
    },
  },
  methods: {
    // 删除节点
    deleteNode(item) {
      this.$emit("delete-node", item);
    },
    // 编辑节点
    editNode(item) {
      console.log("编辑节点", item);
      this.$emit("edit-node", item);
    },
    // 鼠标进入
    showDelete(event, item) {
      event.stopPropagation();
      event.preventDefault();
      // this.mouseEnter = true
      this.$emit("changeNode", {
        uuid: item.uuid,
        mouseEnter: true,
        params: {
          mouseEnter: true,
        },
      });
    },
    // 鼠标离开
    hideDelete(item) {
      // this.mouseEnter = false
      this.$emit("changeNode", {
        uuid: item.uuid,
        mouseEnter: false,
        params: {
          mouseEnter: false,
        },
      });
    },
    // 鼠标移动后抬起
    changeNodeSite(event) {
      // this.$emit('changeNodeSite', {
      //     nodeId: this.node.id,
      //     left: this.$refs.node.style.left,
      //     top: this.$refs.node.style.top,
      // })
    },
  },
  watch: {
    list: {
      handler(newVal, oldVal) {
        // console.log(newVal)
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.node-item {
  border-radius: 4px;
  box-shadow: 0 0 2px #696969;
  cursor: move;
  overflow: initial;
  background: #fbf4dc;
  padding: 10px 10px;
  .node-con {
    text-align: center;
    font-size: 14px;
    color: #606266;
    user-select: none;
    > i {
      font-size: 40px;
    }
  }
}

.node-titel {
  height: 20px;
  background: #ffc400;
}

.node-icon {
  position: absolute;
  top: 0px;
  right: 0px;
  line-height: 20px;
}

.node-icon i {
  cursor: pointer;
}

.flow-node-drag {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: crosshair;
}
.collection-wrap {
  width: 98%;
  height: 98%;
  border-radius: 1%;
  box-shadow: 0 0 6px #a3d1ff;
  border: 2px dotted #a3d1ff;
  cursor: move;
  .node-del {
    position: absolute;
    color: red;
    cursor: pointer;
    top: 5px;
    right: 5px;
    z-index: 1;
    i {
      font-size: 18px;
      font-weight: 800;
    }
    i:hover {
      font-size: 22px;
    }
  }
  .collection-remark {
    position: absolute;
    color: #a3d1ff;
    padding: 10px;
  }
  .group-wrap {
    border-radius: 5px;
    cursor: move;
    color: #a3d1ff;
    background: #041541;
    .group-remark {
      position: absolute;
      color: #a3d1ff;
      padding: 10px;
    }
    .device-wrap {
      border-radius: 5px;
      cursor: move;
      color: #fff;
      background: #2451ff;
      .device-remark {
        position: absolute;
        color: #fff;
        padding: 10px;
        font-size: 8px;
      }
    }
  }
}
</style>
